02. 講歷史，話說 SSR...

2019 iT 邦幫忙鐵人賽

DAY 2

Modern Web

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列第 2 篇

2019鐵人賽 ssr vue

Ralph

團隊InfoSec Horadrim

2018-10-17 00:58:41

16014 瀏覽

分享至

什麼叫做 SSR?

Server-Side Rendering，頁面由後端渲染，HTML由後端產生

　
　
傳統做法整頁HTML不就完全由後端產生嗎？

使用後端框架的 View 及 Template，例如

Rails 之於 erb、haml、slim
PHP 之於 twig、blade
Node.js 之於 ejs、Jade等

為了多榨點效能 Performance，增加互動性 User Experience

前端框架開始幫忙分擔後端渲染的重任，這時頁面初始值可能透過後端 View 塞，漸漸將渲染放到前端，後續操作透過 API

為了多點維護性 Maintainance

接著，為了切開畫面與資料邏輯，此時後端完全 API 化，渲染完全靠前端
演變成現今熟悉的 SPA，純粹 Client-Side Rendering ~~F2E價值++~~

　
　
移到前端渲染，跟著出現新的問題

SEO (Search Engine Optimization)
SMO (Social Media Optimization)
起始延遲 (Initial Latency) / 起始讀取時間 (Initial Load Time)
畢竟得等 js 讀完跑完，抓完API再渲染完

雖然你也能透過 JS 修改 <head>，增加額外資訊
問題 Crawler 不跑 JS，看不到你改的 <meta> 或其他對應 SNS 的 HTML Tag

有幾種搞法讓 Crawler 看得到：

讓後端語言呼叫v8，餵SPA頁面、部分CSR頁面，抓取其渲染完成的 HTML
靠 Headless Browser 跑 JS，抓取其渲染完成的 HTML
有第三方服務專門針對 Crawler 餵渲染好的靜態頁面
例如 prerender
Pre-rendering 事先編成靜態頁面

Google 曾嘗試爬 AJAX 頁面，但現在可說放棄
那時候還替 SPA 訂了個專用符號 #!

問題總是要解決

~~人總是會愈來愈貪心~~
~~跟你夾蒙古烤肉一樣~~

身為需求方

不知道哪個重要就都做吧！

效能++
互動性及使用體驗++
支援 SEO
支援 SMO
最好秒開頁面

身為開發者

那我們能不能前後端寫同一種語言 - JavaScript？

於是 Airbnb 提出了 Universal Rendering

那能不能用我熟悉的前端框架當樣板呢？

於是有了 Next / Nuxt，下一集來介紹 Nuxt

01. Nuxt.js 小跑起步

03. Nuxt.js 怎麼處理 SSR 問題？擔任什麼角色？

系列文

Nuxt - 使用 Vue.js 做 SSR 的第一哩路共 32 篇

RSS系列文訂閱系列文

156 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 則留言

漢堡法師

iT邦新手 5 級 ‧ 2024-02-25 15:02:28

2024 留言，推一個清楚好懂

回應
檢舉

登入發表回應

我要留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22198 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

Nuxt - 使用 Vue.js 做 SSR 的第一哩路系列 第 2 篇